.page(data-page="form-storage")
  .navbar
    .navbar-inner
      .left
        a(href="forms.html").back.link.icon-only
          i.icon.icon-back
      .center Form Storage
      .right
        a(href="#").link.open-panel.icon-only
          i.icon.icon-bars
  .page-content
    .content-block
      p With forms storage it is easy to store and parse forms data, especially on Ajax loaded pages. All you need to make it work is to add "store-data" class to your &lt;form&gt; and Framework7 will store form data with every input change. And the most awesome part is that when you load this page again Framework7 will parse this data and fill all form fields automatically! Just try to fill the form below and then go to any other page, or even you may close this site, and when you return here form fields will have kept your data.
    .content-block-title Personal Details
    form.store-data.list-block(id="demoform-1")
      ul
        li
          .item-content
            .item-media
              i.icon.material-icons person_outline
            .item-inner 
              .item-title.label Name
              .item-input
                input(type="text", placeholder="Your name", name="name")
        li
          .item-content
            .item-media
              i.icon.material-icons email
            .item-inner 
              .item-title.label E-mail
              .item-input
                input(type="email", placeholder="E-mail", name="email")
        li
          .item-content
            .item-media
              i.icon.material-icons language
            .item-inner 
              .item-title.label URL
              .item-input
                input(type="url", placeholder="URL", name="url")
        li
          .item-content
            .item-media
              i.icon.material-icons lock_outline
            .item-inner 
              .item-title.label Password
              .item-input
                input(type="password", placeholder="Password", name="password")
        li
          .item-content
            .item-media
              i.icon.material-icons call
            .item-inner 
              .item-title.label Phone
              .item-input
                input(type="tel", placeholder="Phone", name="phone")
        li
          .item-content
            .item-media
              i.icon.material-icons people_outline
            .item-inner 
              .item-title.label Gender
              .item-input
                select
                  option Male
                  option Female
        li
          .item-content
            .item-media
              i.icon.material-icons today
            .item-inner 
              .item-title.label Birth date
              .item-input
                input(type="date", placeholder="Birth day", value="2014-04-30", name="birth-date")
        li
          .item-content
            .item-media
              i.icon.material-icons check
            .item-inner 
              .item-title.label Switch
              .item-input
                label.label-switch
                  input(type="checkbox", name="switch")
                  .checkbox
        li
          .item-content
            .item-media
              i.icon.material-icons settings
            .item-inner
              .item-title.label Slider
              .item-input
                .range-slider
                  input(type="range", min="0", max="100", value="50", step="0.1", name="slider")
        li.align-top
          .item-content
            .item-media
              i.icon.material-icons chat_bubble_outline
            .item-inner 
              .item-title.label About Me
              .item-input
                textarea(name="about-me").resizable
    .content-block-title I like
    form.store-data.list-block(id="demoform-2")
      ul
        li
          label.label-checkbox.item-content
            input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
            .item-media
              i.icon.icon-form-checkbox
            .item-inner
              .item-title Books
        li
          label.label-checkbox.item-content
            input(type="checkbox", name="ks-checkbox", value="Movies")
            .item-media
              i.icon.icon-form-checkbox
            .item-inner
              .item-title Movies
        li
          label.label-checkbox.item-content
            input(type="checkbox", name="ks-checkbox", value="Food")
            .item-media
              i.icon.icon-form-checkbox
            .item-inner
              .item-title Food
        li
          label.label-checkbox.item-content
            input(type="checkbox", name="ks-checkbox", value="Drinks")
            .item-media
              i.icon.icon-form-checkbox
            .item-inner
              .item-title Drinks
